<script>
export default {
  name: 'DzSection',
  props: {
    title: {
      type: String,
      default: '',
    },
    desc: {
      type: String,
      default: '',
    },
  },
  computed: {
    cls() {
      if (!this.class) return 'dzq-index-section zdzq-section';
      return `dzq-index-section zdzq-section ${this.class}`;
    },
  },
};
</script>

<template>
  <div :class="cls">
    <div v-if="title" class="dzq-index-section__hd">
      <h2 class="dzq-index-section__title">
        <span>{{ title }}</span>
      </h2>
      <p v-if="desc" class="dzq-index-section__description">{{ desc }}</p>
      <slot name="desc" />
    </div>
    <div class="dzq-index-section__bd zdzq-bd">
      <slot />
    </div>
  </div>
</template>
